﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>商品列表—易购触屏版</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/detail.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./mui/css/mui.css">
    <link rel="stylesheet" href="./mui/css/icons-extra.css">
</head>

<body>
    <div id="app">
        <!-- 公用头部 -->
        <nav class="nav">
            <a class="goback" href="javascript:history.back(1)">
                <span class="mui-icon mui-icon-undo"></span>
            </a>
            <div class="nav-title">购物车列表</div>
        </nav>
        <!-- 页面主体 -->
        <section class="mui-card" id="mylayout">

        </section>
        <!-- 公用尾部 -->
        <footer class="footer">
            <a href="#">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a href="#">
                <span class="mui-icon mui-icon-personadd"></span>
                <span class="mui-tab-label">分类</span>
            </a>
            <a href="#">
                <span class="mui-icon mui-icon-extra mui-icon-extra-cart current"></span>
                <span class="mui-tab-label current">购物车</span>
            </a>
            <a href="#">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">我的</span>
            </a>
        </footer>
    </div>
</body>

</html>
<script src="./js/axios.min.js"></script>
<script>
    axios({
        method: 'post',
        url: 'http://localhost:8090/h3/cart/list',
        data: { id: 1 }
    }).then(res => {
        console.log(res.data);
        if (res.data.success) {
            const mylayout = document.getElementById('mylayout')
            let cart = res.data.cart
            let oprice = 0;
            let oquantity = 0;
            let a = 0
            for (let i in cart) {
                a = cart[i].price * cart[i].quantity
                oprice += a
                oquantity += cart[i].quantity
                let div1 = `
                <div class="mui-card-content">
                <!-- 使用v-for遍历 -->
                <div class="mui-card-content-inner flex" v-for="" :key="">
                    <div class="mui-input-row mui-checkbox mui-left">
                        <label>&nbsp;</label>
                        <input type="checkbox" checked/>
                    </div>
                    <img src="${cart[i].imagePath}">
                    <div class="info">
                        <h1>{{${cart[i].title}}}</h1>
                        <div class="flex-num">
                            <span class="price">¥${cart[i].price}</span>
                            <div class="mui-numbox" data-numbox-min='0'>
                                <!-- "-"按钮，点击可减小当前数值 -->
                                <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                                <input class="mui-numbox-input" type="number" value="${cart[i].quantity}"/>
                                <!-- "+"按钮，点击可增大当前数值 -->
                                <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                            </div>
                            <a href="#">删除</a>
                        </div>
                    </div>
                </div>
            </div>
            
                `
                mylayout.innerHTML += div1
            }

            let div2 = `
                <div class="mui-card">
                <div class="mui-card-content">
                  <div class="mui-card-content-inner balance">
                    <div class="left">
                      <p>总计不含运费</p>
                      <p>
                        已勾选商品
                        <span class="red">${oquantity}</span> 件，总价
                        <span class="red">¥${oprice}</span>
                      </p>
                    </div>
                    <button class="mui-btn mui-btn-warning">去结算</button>
                  </div>
                </div>
            </div>
                `
            mylayout.innerHTML += div2
        }
    })
</script>